import React, { useState } from 'react';
import Avatar from './Avatar';
import { User } from '../types';

interface AvatarPreviewProps {
  user: User;
  onAvatarChange: (file: File) => void;
}

const AvatarPreview: React.FC<AvatarPreviewProps> = ({ user, onAvatarChange }) => {
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      // 验证文件类型
      if (!file.type.startsWith('image/')) {
        alert('请选择图片文件');
        return;
      }
      
      // 验证文件大小（最大2MB）
      if (file.size > 2 * 1024 * 1024) {
        alert('图片大小不能超过2MB');
        return;
      }

      // 创建预览URL
      const url = URL.createObjectURL(file);
      setPreviewUrl(url);

      // 调用父组件的回调
      onAvatarChange(file);
    }
  };

  const handleRemovePreview = () => {
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl);
      setPreviewUrl(null);
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-4">
        <Avatar user={user} size="xl" editable={true} onAvatarChange={onAvatarChange} />
        <div>
          <h3 className="text-lg font-medium text-gray-900">头像设置</h3>
          <p className="text-sm text-gray-500">点击头像可以更换，支持 JPG、PNG 格式</p>
          <p className="text-xs text-gray-400">文件大小不超过 2MB</p>
        </div>
      </div>

      {previewUrl && (
        <div className="bg-gray-50 rounded-lg p-4">
          <div className="flex items-center justify-between mb-2">
            <h4 className="text-sm font-medium text-gray-900">预览效果</h4>
            <button
              onClick={handleRemovePreview}
              className="text-sm text-red-600 hover:text-red-800"
            >
              取消
            </button>
          </div>
          <div className="flex space-x-4">
            <div className="text-center">
              <img
                src={previewUrl}
                alt="头像预览"
                className="w-16 h-16 rounded-full object-cover mx-auto"
              />
              <p className="text-xs text-gray-500 mt-1">大尺寸</p>
            </div>
            <div className="text-center">
              <img
                src={previewUrl}
                alt="头像预览"
                className="w-12 h-12 rounded-full object-cover mx-auto"
              />
              <p className="text-xs text-gray-500 mt-1">中尺寸</p>
            </div>
            <div className="text-center">
              <img
                src={previewUrl}
                alt="头像预览"
                className="w-8 h-8 rounded-full object-cover mx-auto"
              />
              <p className="text-xs text-gray-500 mt-1">小尺寸</p>
            </div>
          </div>
        </div>
      )}

      <div className="flex items-center space-x-4">
        <label className="cursor-pointer">
          <input
            type="file"
            accept="image/*"
            onChange={handleFileChange}
            className="hidden"
          />
          <span className="btn btn-secondary px-4 py-2">
            选择图片
          </span>
        </label>
        {user.avatar && (
          <button
            onClick={() => {
              // 这里可以添加删除头像的功能
              alert('删除头像功能待实现');
            }}
            className="text-sm text-red-600 hover:text-red-800"
          >
            删除头像
          </button>
        )}
      </div>
    </div>
  );
};

export default AvatarPreview; 